import React, {useRef, useState} from "react";
import ListPage from "../Common/DataSource/ListPage";
import {http} from "../../util/httpService";
import {PlusSquareOutlined, EditOutlined} from '@ant-design/icons'
import {UseRefType} from "../Common/DataSource/DataType";

function User() {
    const listPage: UseRefType = useRef()
    const addUser = () => {
        console.log(listPage.current.tableSourceRef.current)
    }

    const searchConfig = {
        formData: [
            {
                ColItemType: 'Select',
                Config: {
                    label: '城市',
                    name: 'city',
                    rules: [
                        {required: true, message: '当前选项必填'}
                    ]
                },
                InputConfig: {
                    placeholder: '请输入城市',
                    allowClear: true,
                    mode: 'multiple'
                },
                InputValueConfig: {
                    keyName: 'name',
                    keyValue: 'key',
                    tableApi: {
                        url: 'https://www.fastmock.site/mock/43500c531963a5a5fda54cdac12c982e/xianju/city',
                        type: 'get',
                        isApi: false
                    },
                    childrenItem: []
                }
            }
        ],
        formConfig: {
            className: 'test-form',
        },
        isFormBtn: true,
    }

    const btnGroup = [
        {title: '新增用户', icon: <PlusSquareOutlined/>, onClick: addUser, key: 'add'},
        {title: '修改用户', icon: <EditOutlined/>, onClick: addUser, key: 'edit'},
    ]

    const dataSourceConfig = {
        columns: [
            {
                'title': 'id',
                'dataIndex': 'id',
                'key': 'id',
                width: 200
            },
            {
                'title': '姓名',
                'dataIndex': 'name',
                'key': 'name',
                width: 200
            },
            {
                'title': '登录名',
                'dataIndex': 'loginName',
                'key': 'loginName'
            },
            {
                'title': '部门',
                'dataIndex': 'deptName',
                'key': 'deptName'
            },
            {
                'title': '联系方式',
                'dataIndex': 'mobile',
                'key': 'mobile'
            },
            {
                'title': '所在医院',
                'dataIndex': 'hospital',
                'key': 'hospital'
            },
            {
                'title': '创建时间',
                'dataIndex': 'creatTime',
                'key': 'creatTime',
                type: {
                    moment: 'YYYY-MM-DD'
                }
            },
            {
                'title': '状态',
                'dataIndex': 'errTimes',
                'key': 'errTimes',
                'render': (value: any) => {
                    if (value > 4) {
                        return (<div style={{color: 'red'}}>锁定</div>)
                    } else {
                        return (<div>正常</div>)
                    }
                }
            },
            {
                'title': 'id',
                'dataIndex': 'id',
                'key': 'id',
                width: 200
            },
            {
                'title': '姓名',
                'dataIndex': 'name',
                'key': 'name',
                width: 200
            },
            {
                'title': '登录名',
                'dataIndex': 'loginName',
                'key': 'loginName'
            },
            {
                'title': '部门',
                'dataIndex': 'deptName',
                'key': 'deptName'
            },
            {
                'title': '联系方式',
                'dataIndex': 'mobile',
                'key': 'mobile'
            },
            {
                'title': '所在医院',
                'dataIndex': 'hospital',
                'key': 'hospital'
            },
            {
                'title': '创建时间',
                'dataIndex': 'creatTime',
                'key': 'creatTime',
                type: {
                    moment: 'YYYY-MM-DD'
                }
            },
            {
                'title': '状态',
                'dataIndex': 'errTimes',
                'key': 'errTimes',
                'render': (value: any) => {
                    if (value > 4) {
                        return (<div style={{color: 'red'}}>锁定</div>)
                    } else {
                        return (<div>正常</div>)
                    }
                }
            },

        ],
        dataSource: [],
        tableApi: {
            url: '/user/users',
            type: 'post'
        },
        dataSourceConfig: {
            bordered: true,
            size: 'defalut',
            rowKey: (res: any) => res.id
        },
        componentConfig: {
            isPagination: false
        }
    }

    return (
        <ListPage
            cRef={listPage}
            SearchConfig={searchConfig}
            ButtonGroupConfig={btnGroup}
            DataSourceConfig={dataSourceConfig}
        />
    )
}

export default User